<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); ?>

<!doctype html>
<html>
   <head>
      <style>
         canvas { 
            background: #ddd; 
            display: block; 
            margin: 25px auto;
            border: 1px solid #000;
            box-shadow: 0 5px 42px #555;
         }
         
         #dialog {
            width: 780px;
            padding: 5px 10px;
            background: #000;
            color: #0f0;
            margin: 10px auto;
         }
         
         #nav {
            width: 800px;
            padding: 0;
            margin: 10px auto;
            list-style: none;
            overflow: auto;
         }
         
         #nav li {
            display: block;
            float: left;
            margin: 10px 10px 10px 0;
         }
         
         #nav li:last-child {
            display: block;
            float: right;
            margin: 10px 0 10px;
         }
         
         input[type=button] {
            padding: 10px;
         }
      </style>
      
      <title>GH:69 Prototype</title>
   </head>
   
   <body>

<h1>Scan view</h1>

<canvas id="screen" width="800" height="450"></canvas>

<ul id="nav">
   <li><input type="button" value="Histogram" id="action_histogram"/></li>
   <li><input type="button" value="Grayscale" id="action_grayscale"/></li>
   <li><input type="button" value="Reset" id="action_reset"/></li>
</ul>

<p id="dialog"></p>


<script src="<?= site_url('public/js/proto.js'); ?>"></script>

<script>
document.getElementById('action_histogram').onclick = action_histogram;
document.getElementById('action_grayscale').onclick = action_grayscale;
document.getElementById('action_reset').onclick = action_reset;
</script>

   </body>
</html>